<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf8">
    <title> 代码暂存 </title>
</head>
<body>
<?php require("front_view_nav.php"); ?>
<div class="col-lg-offset-1 col-lg-10 col-sm-12 col-xs-12" id="statsh_code_list">
    <!--删除代码提示框-->
    <zz-modal-component
        v-if="delDlg.isShow"
        modal-title='删除代码'
        modal-style='width:300px;'
        ok-btn="确认"
        cancel-btn="取消"
        @on-ok="okDel"
        @on-cancel="cancelDel">
        <div slot="modal-content">
            <p>是否确定删除【{{delDlg.codeInfo.title}}】</p>
        </div>
    </zz-modal-component>
    <div class="panel panel-default" style="margin-left: -1.3rem; margin-right: -1.3rem;">
        <div class="panel-body">
            <div class="col-lg-12 col-xs-12 col-sm-12">
                <form @submit.prevent="getStashCodeList(true)" class="form-horizontal" >
                    <div class="col-lg-2"></div>
                    <div class="form-group col-sm-3 col-lg-3" style="margin-left: 0.2rem;">
                        <input v-model="searchKeyWord" class="form-control" placeholder="请输入代码标题或题目ID" type="text">
                    </div>
                    <div class="col-sm-1 col-lg-1">
                        <button type="submit" class="btn btn-primary" >查找</button>
                    </div>
                    <div class="col-sm-1 col-lg-1">
                        <button @click="clearSearchPara()" type="reset" class="btn btn-primary" >清空</button>
                    </div>
                    <div class="col-sm-2 col-lg-2">
                        <button @click="postCode(null)" type="button" class="btn btn-primary" >添加代码</button>
                    </div>
                </form>
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>题目ID</th>
                <th style="cursor:pointer" @click="listByTitle">标题</th>
                <th class="hidden-xs">最近修改时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr	v-for="(code, index) in stashCodeList">
                <td>{{ index+1}}</td>
                <td><a :href="problemInfoUrl(code.problem_id)">{{code.problem_id}}</a></td>
                <td class="col-sm-4 col-xs-4 col-lg-4"><a :href="codeInfoUrl(code.id)">{{code.title}}</a></td>
                <td class="hidden-xs">{{code.accesstime}}</td>
                <td>
                    <div>
                        <button v-on:click="postCode(code.id)">编辑</button>
                        &nbsp;<button v-on:click="delCode(code)">删除</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="panel-body">
            <div class="col-lg-12 col-xs-12 col-sm-12">
                <div class="col-sm-1 col-lg-1">
                    <button @click="switchPage(0)" type="button" class="btn btn-primary" >首页</button>
                </div>
                <div class="col-sm-2 col-lg-1">
                    <button @click="switchPage(-1)" type="button" class="btn btn-primary" >上一页</button>
                </div>
                <div class="col-sm-2 col-lg-1">
                    <button @click="switchPage(1)" type="button" class="btn btn-primary" >下一页</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#statsh_code_list",
        data:{
            searchKeyWord:"",
            pageId:0,  // 首页的pageId取值为0
            maxPageId:10, // 最大页码
            orderByTitle:0, // 是否案标题排序
            stashCodeList: [],
            delDlg:{
                isShow:false,
                codeInfo:{},
            },
        },

        mounted:function () {
            this.getStashCodeList(true);
        },

        methods:{
            // 获取暂存的代码列表
            getStashCodeList:function(resetPageId) {
                if ( resetPageId ) {
                    this.resetPageId();
                }
                let reqData = {};
                if ( isNaN(this.searchKeyWord) ) {
                    reqData.title = this.searchKeyWord;
                }
                else {
                    reqData.problemid = this.searchKeyWord;
                }
                reqData.pageid = this.pageId;
                reqData.op = "search";
                reqData.by_title=this.orderByTitle;
                let param = "para="+JSON.stringify(reqData);
                new Promise(function(resolve, reject) {
                    $.ajax({
                        type:'post',
                        url:'../model/stash_code_router.php',
                        data:param,
                        dataType:'json',
                        success:function (retData) {
                            resolve(retData.dat);
                        }
                    });

                }).then(function(jsonData) {
                    // 注意：mounted 时,无法使用this
                    app.stashCodeList = jsonData.code_list;
                    app.maxPageId = jsonData.max_pageid;
                }).catch(function(err) {
                    console.log('出错：' + err);
                });
            },

            // 重置页面ID
            resetPageId:function () {
                this.pageId = 0;
                this.maxPageId = 10;
            },

            // 重置搜索参数
            clearSearchPara:function () {
                this.searchKeyWord = "";
            },

            switchPage:function(op) {
                // 回到首页,首页的pageId的取值为0
                if ( op == 0 ) {
                    this.pageId = 0;
                }
                else {
                    this.pageId += op;
                }
                if ( this.pageId < 0 ) {
                    this.pageId = 0;
                }
                else if ( this.pageId > this.maxPageId ) {
                    this.pageId = this.maxPageId;
                }
                this.getStashCodeList(false);
            },

            problemInfoUrl:function(problemId) {
                let url = "../../problem.php?id=";
                url += problemId;
                return url;
            },

            codeInfoUrl:function(codeId) {
                let url = "show_stash_code.php?id=";
                url += codeId;
                return url;
            },

            // 编辑或者添加用户信息
            postCode:function(codeId) {
                let param = "";
                if ( ! isNull(codeId) ) {
                    param = "?id=" + codeId;
                }
                window.location.href="stash_code_post.php"+param;
            },

            delCode:function (code) {
                this.delDlg.codeInfo = code;
                this.delDlg.isShow = true;
            },

            okDel:function () {
                this.delDlg.isShow = false;
                // 发生删除用户请求
                let reqData = {};
                reqData.op = "del";
                reqData.id = this.delDlg.codeInfo.id;
                let param = "para="+JSON.stringify(reqData);
                new Promise(function(resolve, reject) {
                    $.ajax({
                        type:'post',
                        url:'../model/stash_code_router.php',
                        data:param,
                        dataType:'json',
                        success:function (retData) {
                            if ( retData.status ) {
                                resolve();
                            }
                            else {
                                reject(retData.msg);
                            }
                        }
                    });

                }).then(function() {
                    //alert('删除代码成功');
                    app.getStashCodeList(false);
                }).catch(function(errMsg) {
                    alert('删除代码失败: '+errMsg);
                });
            },
            cancelDel:function () {
                this.delDlg.isShow = false;
            },

            listByTitle:function () {
                this.orderByTitle = this.orderByTitle === 0 ? 1 : 0
                this.getStashCodeList(true)
            },
        }
    });
</script>

</body>
</html>
<?php
//require("../oj-footer.php");
?>
